<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:insert="~{include :: header('菜单列表')}" />
	<th:block th:insert="~{include :: bootstrap-table-css}" />
	<link href="/static/libs/bootstrap-treetable/bootstrap-treetable.css" rel="stylesheet">
</head>
<body class="hold-transition">
<!-- Site wrapper -->
<div class="container-fluid mb-2">
	<div class="toolbar" id="toolbar" role="group">
		<a class="btn btn-success" onclick="$.operate.add(0)" shiro:hasPermission="menu:edit">
			<i class="fa fa-plus"></i> 新增
		</a>
		<a class="btn btn-info" id="expandAllBtn">
			<i class="fa fa-exchange"></i> 展开/折叠
		</a>
	</div>
	<table id="bootstrap-tree-table" class="table-striped bootstrap-tree-table"></table>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script src="/static/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<script th:inline="javascript">
	var editFlag = [[${@permission.hasPermi('menu:edit')}]];
	var removeFlag = [[${@permission.hasPermi('menu:remove')}]];
	var datas = [[${@dict.getType('sys_show_hide')}]];
	var prefix = "/menu";

	$(function() {
		var options = {
			parentId: "parentId",
			uniqueId: "menuId",
			url: prefix + "/list.json",
			createUrl: prefix + "/add.html?parentId={id}",
			updateUrl: prefix + "/edit.html?id={id}",
			removeUrl: prefix + "/remove.json?id={id}",
			modalName: "菜单",
			columns: [{
				field: 'selectItem',
				radio: false,
				visible: false
			},
				{
					title: '菜单名称',
					field: 'menuName',
					width: '24%',
					formatter: function(value, row, index) {
						if ($.common.isEmpty(row.icon)) {
							return row.menuName;
						} else {
							return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
						}
					}
				},
				{
					field: 'url',
					title: '请求地址',
					width: '20%',
					align: "left",
					formatter: function(value, row, index) {
						return $.table.tooltip(value, 30);
					}
				},
				{
					field: 'perms',
					title: '权限标识',
					width: '19%',
					align: "left",
					formatter: function(value, row, index) {
						return $.table.tooltip(value, 30);
					}
				},
				{
					title: '类型',
					field: 'menuType',
					width: '8%',
					align: "left",
					formatter: function(value, item, index) {
						if (item.menuType === 'M') {
							return '<span class="label label-success">目录</span>';
						}
						else if (item.menuType === 'C') {
							return '<span class="label label-primary">菜单</span>';
						}
						else if (item.menuType === 'F') {
							return '<span class="label label-warning">按钮</span>';
						}
					}
				},
				{
					field: 'visible',
					title: '可见',
					width: '8%',
					align: "left",
					formatter: function(value, row, index) {
						if (row.menuType === 'F') {
							return '-';
						}
						return $.table.selectDictLabel(datas, row.visible);
					}
				},
				{
					field: 'orderNum',
					title: '排序',
					width: '5%'
				},
				{
					title: '操作',
					width: '16%',
					align: "left",
					formatter: function(value, row, index) {
						var actions = [];
						actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.menuId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
						actions.push('<a class="btn btn-info btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.menuId + '\')"><i class="fa fa-plus"></i>新增</a> ');
						actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.menuId + '\')"><i class="fa fa-trash"></i>删除</a>');
						return actions.join('');
					}
				}]
		};
		$.treeTable.init(options);
		// tree表格树 展开/折叠
		$("#expandAllBtn").click(function() {
			var dataExpand = $.common.isEmpty(table.options.expandAll) ? true : table.options.expandAll;
			if (!dataExpand) {
				$.bttTable.bootstrapTreeTable('expandAll');
			} else {
				$.bttTable.bootstrapTreeTable('collapseAll');
			}
			table.options.expandAll = !dataExpand;
		});
	});
</script>
</body>
</html>